<!-- 流程运行图 -->
<template>
  <div>
    <el-image :src="imageContent" fit="fit">
      <template #error>
        <i class="el-icon-picture-outline">{{'加载流程图：'+this.processInstanceId}}</i>
      </template>
    </el-image>
<!--    <el-divider content-position="left" v-if="showCurrentApproverList">当前审批人</el-divider>
    <el-collapse v-model="taskApproverActive" v-if="showCurrentApproverList">
      <el-collapse-item v-for="(node, index) in taskApproverList" :title="'节点：'+node.taskName" :name="node.taskId" :key="index">
        <el-table v-loading="loading" :data="node.approvers" max-height="250" border size="mini">
          <el-table-column label="登录名" prop="loginName" align="center" min-width="300px" />
          <el-table-column label="用户名" prop="userName" align="center" min-width="300px" />
          <el-table-column label="公司名称" prop="companyName" min-width="300px" />
        </el-table>
      </el-collapse-item>
    </el-collapse>-->
  </div>
</template>

<script>
import { showFlowRunImgByInstantId, getProcessRunTaskAndApprover } from "./api";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      //图片流
      imageContent: "",
      // 当前审批节点及审批人信息
      taskApproverList: [],
      // 展开的列表
      taskApproverActive: [],
    }
  },
  props: {
    // 流程实例ID
    processInstanceId: {
      required: true,
      type: String,
    },
    showCurrentApproverList: {
      required: false,
      type: Boolean,
      default: true
    },
  },
  watch: {
    processInstanceId(newVal, oldVal) {
      // console.log("showCurrentApproverList", this.showCurrentApproverList);
      // 更新流程图，存在新的值且发生改变
      if (newVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
        if (newVal != oldVal) {
          this.doShowFlowRunImgByInstantId();
        }
      } else {
        this.loading = false;
        this.imageContent = "";
        this.taskApproverList = [];
        this.taskApproverActive = [];
      }
    }
  },
  created() {
    // console.log("created showCurrentApproverList", this.showCurrentApproverList);
    // console.log("created processInstanceId", this.processInstanceId);
    //初始化显示图片
    if (this.processInstanceId) {
      this.doShowFlowRunImgByInstantId();
    }
  },
  methods: {
    // 执行显示图片请求
    doShowFlowRunImgByInstantId: function () {
      this.loading = true;
      console.log("doShowFlowRunImgByInstantId", this.processInstanceId);
      //获取流程图
      showFlowRunImgByInstantId(this.processInstanceId).then((response) => {
        //图片二进制流转base
        this.imageContent =
          "data:image/png;base64," +
          btoa(
            new Uint8Array(response).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
      });
      this.taskApproverList = [];
      this.taskApproverActive = [];
      //获取流程内容
      getProcessRunTaskAndApprover(this.processInstanceId).then((response2) => {
        response2.data.forEach((element) => {
          const node = {
            approvers: [],
            taskId: element.taskId,
            taskName: element.taskName,
          };
          node.approvers.push(...element.approvers);
          this.taskApproverList.push(node);
          this.taskApproverActive.push(element.taskId);
        });
        this.loading = false;
      });
    },

  }
}
</script>

<style lang="scss" scoped>
</style>
